<template>
	<div class="homePage">
		<view class="container zhanweiBox">
			<div class="fixtopnav" :style="[body_top]">{{navText}}</div>
			<div class="suitBox">
				<h3 class="zjt"><span>主</span><span>讲</span><span>台</span></h3>
				<div class="suit">
					<ul v-for="(row,i) in zwInfo" :key="i">
						<li v-for="(col,j) in row" :key="j" @click="selectSuit(i,j)" :class="{'guodao' : gdInfo.includes(j.toString()) ,
							'zuowei' : (col == 1), 
							'nosuit' : (col ==2), 
							'cur' : (i == selectInfo[0] && j == selectInfo[1] && personSelect.length == 0),
							'no' : (selectAll[i][j] === true),
							'my' : (personSelect[0] == i && personSelect[1] == j)
							}">1</li>
					</ul>

					<div class="chInfo" :class="chInfo.position">
						<div class="ch" v-for="(ch,index) in parseInt(chInfo.num)">窗</div>
					</div>
					<div class="menInfo" :style="[menInfo]">门</div>
				</div>
				<ul class="colorIntro">
					<li class="kz"><span></span>空座</li>
					<li class="my"><span></span>我的选择</li>
					<li class="no"><span></span>已被占</li>
					<li class="select"><span></span>正在选择</li>
				</ul>
			</div>
			<div class="confirmBox" v-if="selectInfo.length > 0 && personSelect.length == 0">
				<h4 class="suitInfo">当前选择：{{selectInfo[0] + 1}}排，{{selectInfo[1] + 1}}座</h4>
				<u-button type="primary" text="确认选座" size="small" @click="confirmSuit()"></u-button>
			</div>
			<div class="confirmBox" v-if=" personSelect.length > 0">
				<h4 class="suitInfo">我的选择：{{Number(personSelect[0]) + 1}}排，{{Number(personSelect[1]) + 1}}座</h4>
			</div>
		</view>
		
		<div class="limitBox" v-if="!limit">
			<div class="textContent" v-if="userphone">
				<h3>暂无权限</h3>
				<p>如已报名，请联系报名老师添加权限</p>
			</div>
			<div class="textContent" v-else>
				<h3>暂未登录</h3>
				<p>登录后，课进行座位选取</p>
				<u-button text="立即登录" type="error" size="small" @click="toLogin()"></u-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database();
	export default {
		data() {
			return {
				limit: false,
				userInfo:"",
				id: '',
				positionInfo: '',
				body_top: {},
				navText: '',
				suitLink: '',
				zwInfo: [],
				selectInfo: [],
				page: 1,
				jlList: [],
				selectAll: [],
				personSelect: [],
				gdInfo: [],
				chInfo: "",
				menInfo: {}
			};
		},
		onShow() {},
		onPageScroll(e) {
			let that = this;
		},
		onLoad(options) {
			if (!options) {
				this.infoScene = 'default';
			} else {
				this.id = options.id ? options.id : '701d5ae766552ce501d0acc9601d94bb'
				this.getfzinfo()
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			usernum() {
				return this.$store.getters.usernum ? this.$store.getters.usernum : '';
			}
		},
		mounted() {
			this.checkLimit()
			if (this.userphone) {
				this.getPerson()
			}
		},
		watch: {
			userphone(val) {
				if (this.userphone) {
					this.emptyData()
					this.checkLimit()
				}
			}
		},
		created() {
			let that = this;
			that.positionInfo = wx.getMenuButtonBoundingClientRect();
			that.setTopInfo()
			
		},
		methods: {
			...mapActions(['LogSetTeacher', 'LogSetPhone', 'LogSetArea', 'LogSetNum']),
			toLogin(){
				let that = this
				uni.navigateTo({
					url:'../../my/login'
				})
			},
			setTopInfo() {
				let that = this;
				let info = that.positionInfo;
				that.body_top = {
					'line-height': info.height + 'px',
					'padding-top': info.top + 'px'
				};
			},
			getfzinfo() {
				var that = this;
				db.collection('hd_zhanwei').doc(that.id).get({
					success: function(res) {
						that.gdInfo = res.data.gd.split(',')
						that.zwInfo = res.data.suit
						that.selectAll = that.zwInfo
						that.navText = res.data.navText
						that.chInfo = res.data.chInfo
						that.menInfo = res.data.menInfo
						that.getjl()
					}
				})
			},
			getjl(page) {
				let that = this
				db.collection('hd_zhanwei_suit').where({
					hdid: that.id
				}).skip(page * 20).limit(20).get({
					success: function(res) {
						if (res.data.length == 20) {
							that.jlList = that.jlList.concat(res.data)
							let p = page + 1
							that.getjl(p)
						} else {
							that.jlList = that.jlList.concat(res.data)
							that.dealData()
						}
					}
				})
			},
			dealData() {
				let that = this
				let arr = that.jlList
				let newSuit = []
				arr.map((item, index) => {
					newSuit.push(item.suit)
				})
				newSuit.map((item, index) => {
					let a = item.split(',')
					let x = Number(a[0])
					let y = Number(a[1])
					that.selectAll[x][y] = true
				})
				that.$forceUpdate()
			},
			selectSuit(i, j) {
				let that = this
				if (that.selectAll[i][j] === true) {
					Toast('该座位已被占');
					return
				}
				if(that.zwInfo[i][j] == 2){
					return
				}
				that.selectInfo[0] = i
				that.selectInfo[1] = j
				that.$forceUpdate()
			},
			getPerson() {
				let that = this
				db.collection('hd_zhanwei_suit').where({
					phone: that.userphone,
					hdid: that.id
				}).get({
					success: function(res) {
						if (res.data.length > 0) {
							that.personSelect = res.data[0].suit.split(",")
						}
					}
				})
			},
			checkLimit(){
				let that = this
				db.collection('hd_zhanwei_limit').where({
					phone: that.userphone,
					hdid: that.id
				}).get({
					success: function(res){
						if(res.data.length > 0){
							that.limit = true
							that.userInfo = res.data[0]
						}else{
							that.limit = false
						}
					}
				})
			},
			confirmSuit() {
				let that = this
				if (!that.userphone) {
					uni.showToast({
						icon:'error',
						title:"请先登录"
					})
					uni.navigateTo({
						url: '../../my/login'
					});
					return;
				}
				if(!that.limit){
					uni.showToast({
						icon:'error',
						title:"暂无权限"
					})
					return
				}
				db.collection('hd_zhanwei_suit').where({
					phone: that.userphone,
					hdid: that.id
				}).get({
					success: function(res) {
						if (res.data.length > 0) {
							uni.showToast({
								title: "您已占座",
								icon: 'error'
							})
						} else {
							db.collection('hd_zhanwei_suit').where({
								suit: that.selectInfo.join(','),
								hdid: that.id
							}).get({
								success: function(res) {
									if (res.data.length > 0) {
										uni.showToast({
											title: "下手慢了，重新选座吧~",
											icon: 'error'
										})
										that.emptyData()
									} else {
										db.collection('hd_zhanwei_suit').add({
											data: {
												phone: that.userphone,
												suit: that.selectInfo.join(','),
												hdid: that.id,
												name: that.userInfo.name,
												time: that.getTime()
											},
											success: function(res) {
												uni.showToast({
													title: "占座成功",
													icon: "success"
												})
												that.emptyData()
											},
											fail: function(req) {
												uni.showToast({
													title: "占座失败",
													icon: "error"
												})
												that.emptyData()
											}
										})
									}
								}
							})
						}
					}
				})
			},
			getTime() {
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let sec = day.getSeconds().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu + ':' + sec
				return time
			},
			emptyData() {
				let that = this
				that.zwInfo = []
				that.selectInfo = []
				that.page = 1
				that.jlList = []
				that.selectAll = []
				that.personSelect = []
				that.getfzinfo()
				that.getPerson()
			},


		},
		components: {}
	};
</script>

<style>
	@import url('./index.css');
</style>